@import '../assets/styles/variables.less';
.xtx-steps {
    display: flex;
    text-align: center;
    padding: 20px;
    &-item {
      flex: 1;
      &:first-child {
        .step {
          &::before {
            display: none;
          }
        }
      }
      &:last-child {
        .step {
          &::after {
            display: none;
          }
        }
      }
      &.active {
        .step {
          > span {
            border-color: @xtxColor;
            background: @xtxColor;
            color: #fff;
          }
          &::before,
          &::after {
            background: @xtxColor;
          }
        }
        .title {
          color: @xtxColor;
        }
      }
      .step {
        position: relative;
        > span {
          width: 48px;
          height: 48px;
          font-size: 28px;
          border: 2px solid #e4e4e4;
          background: #fff;
          border-radius: 50%;
          line-height: 44px;
          color: #ccc;
          display: inline-block;
          position: relative;
          z-index: 1;
        }
        &::after,
        &::before {
          content: "";
          position: absolute;
          top: 23px;
          width: 50%;
          height: 2px;
          background: #e4e4e4;
        }
        &::before {
          left: 0;
        }
        &::after {
          right: 0;
        }
      }
      .title {
        color: #999;
        padding-top: 12px;
      }
      .desc {
        font-size: 12px;
        color: #999;
        padding-top: 6px;
      }
    }
  }